/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    ScrollView,
    TouchableOpacity,
    StatusBar,
    TouchableWithoutFeedback,
    Platform
} from 'react-native';
import DeviceInfo from 'react-native-device-info'

import Constants from '../../config/Constants'
import {DefaultAssetTypeOptions} from '../../config/dict/AssetType'

let _self;

let _top = 0;

if (Platform.OS === 'ios') {
    if (DeviceInfo.getSystemVersion().split('.')[0] * 1 > 10) {
        _top = -20;
    }
}

class Views extends React.Component {

    constructor(props) {
        super(props);
        _self = this;
        this.state = {
            type: '',
            name: '',
            childActive: 0,
            all: [
                '0','1','2',
                '       供应链金融是指以核心客户为依托，以真实贸易背景为前提，运用自偿性贸易融资的方式，通过应收账款质押、货权质押等手段封闭资金流或者控制物权，对供应链上下游企业提供的综合性金融产品和服务。',
                '       企业贷款类资产可分为： 流动资金贷款、固定资产贷款、信用贷款、担保贷款、股票质押贷款、外汇质押贷款、单位定期存单质押贷款、黄金质押贷款、银团贷款、银行承兑汇票、银行承兑汇票贴现、商业承兑汇票贴现、买方或协议付息票据贴现、有追索权国内保理、出口退税账户托管贷款等需求资产。',
                '       抵质押类资产指可进行抵押或质押的资产（土地、房产、设备等），我们根据评估价值对接合适的资金方。',
                '       租赁资产指的是指企业因租赁业务而形成的债权资产。根据租赁资产的质量，增信措施，设计租赁保理，信托计划、资管计划、发行资产支持证券类的融资方案，并推荐给银行、信托、资管、证券公司。',
                '       债权资产的具体形式主要包括各种存款和贷款活动中，以转让货币使用权的形式形成的债权资产；各种商品交换中，以转让商品所有权的形式形成的债权资产；以及其他经济活动中所形成的债权资产。具体包括但不限于短期债权性投资、长期债券投资、委托贷款和未入账的因承担连带责任产生的债权及应由责任人或保险公司赔偿的款项等。这里指的是非金融机构债权资产。',
                '       PPP项目指在公共服务领域，政府采取竞争性方式选择具有投资、运营管理能力的社会资本，双方按照平等协商原则订立合同，由社会资本提供公共服务，政府依据公共服务绩效评价结果向社会资本支付对价。我们可提供合适的资金方，解决企业融资需求。',
                '       信托收益权类资产是指以资产的收益权，即以“基础资产预售、销售或以其他形式使用和处分所形成现金收入的权利”作为信托基础财产，并通过管理、运用和处分该初始信托财产，向信托受益人分配信托利益。我们可提供合适的资金方，解决企业融资需求。',
                '       债权资产的具体形式主要包括各种存款和贷款活动中，以转让货币使用权的形式形成的债权资产；各种商品交换中，以转让商品所有权的形式形成的债权资产；以及其他经济活动中所形成的债权资产。具体包括但不限于短期债权性投资、长期债券投资、委托贷款和未入账的因承担连带责任产生的债权及应由责任人或保险公司赔偿的款项等。这里指的是金融机构债权资产。',
                '       票据是指出票人依法签发的由自己或指示他人无条件支付一定金额给收款人或持票人的有价证券，即某些可以代替现金流通的有价证券。包括汇票、本票、支票、提单、存单、股票等。我们可为持票人提供贴现渠道服务。',
            ],
            gyl: [
                {
                    t1: '应收类资产',
                    v1: '       应收账款是指企业因销售商品、提供劳务等经营活动，应向购货单位或接受劳务单位收取的款项，主要包括企业销售商品或提供劳务等应向有关债务人收取的价款及代购货单位垫付的包装费、运杂费等。',
                    t2: '模式及服务',
                    v2: '       应收账款融资是指在供应链核心企业承诺支付的前提下，供应链上下游的企业用未到期的应收账款向金融机构进行贷款的一种融资模式，应收账款融资使得上游企业可以及时获得银行的短期信用贷款。我们可提供保理、应收账款质押等业务设计服务方案，匹配资金方，解决企业融资需求。'
                },{
                    t1: '商票类资产',
                    v1: '       商业票据是指由核心企业开出的无担保短期票据。商业票据的可靠程度依赖于发行企业的信用程度，可以背书转让，可以贴现。',
                    t2: '模式及服务',
                    v2: '       供应链票据是指以供应链中的核心企业为发行人和偿债主体，募集资金通过银行委托贷款等形式发放给上、下游企业的直接债务融资工具。我们可匹配银行提供商票保贴服务，解决企业融资需求。'
                },{
                    t1: '预付类资产',
                    v1: '       预付账款是指企业按照购货合同的规定，预先以货币资金或货币等价物支付供应单位的款项。',
                    t2: '模式及服务',
                    v2: '       预付款融资模式是指上游企业承诺回购的前提下，由第三方物流企业提供信用担保，中小企业以金融机构指定仓库的既定仓库向银行等金融机构申请质押贷款来缓解预付货款压力，同时由金融机构控制其提货权的融资业务。我们可设计保兑仓，厂仓银等服务方案，匹配资金方，解决企业融资需求。'
                },{
                    t1: '存货类资产',
                    v1: '       存货是指企业在日常活动中持有以备出售的产成品或商品、处在生产过程中的在产品、在生产过程或提供劳务过程中耗用的材料或物料等，包括各类材料、在产品、半成品、产成品或库存商品以及包装物、低值易耗品、委托加工物资等 。',
                    t2: '模式及服务',
                    v2: '       存货融资是企业以存货作为质押向金融机构办理融资业务的行为，不仅可以为企业提供高水平的物流服务，又可以为中小型企业解决融资问题，解决企业运营中现金流的资金缺口，以提高供应链的整体绩效。我们可设计动产质押（静态/动态）、仓单质融资方案，匹配资金方，解决融资需求。'
                }
            ]
        }
        this.state.type = this.props.navigation.state.params.type;
        this.state.name = this.props.navigation.state.params.name;
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    //scroll滚动监听 => navBar属性opacity
    eventOnScroll(event) {
        const opacity = event.contentOffset.y / layout.height(300) > 1 ? 1 : event.contentOffset.y / layout.height(500);
        _self.refs.nav_bar.setNativeProps({
            style: {
                backgroundColor: `rgba(51,56,85,${opacity})`
            }
        })
    }

    skipToDemand() {
        const item = DefaultAssetTypeOptions.find((item)=>item.id === this.state.type);
        _self.props.navigation.navigate('DemandForm',{selectedItem: item});
    }

    render() {
        return (
            <View style={base.baseOuter}>
                <ScrollView
                    contentInset={{
                        top: _top
                    }}
                    onScroll={(e) => this.eventOnScroll(e.nativeEvent)}
                    scrollEventThrottle={1}
                    style={styles.container}>
                    <Image resizeMode={'cover'} style={styles.topImage}
                           source={require('../../sources/image_asset_banner.png')}/>
                    <View style={styles.contentBox}>
                        <View style={styles.textTopBox}>
                            {
                                this.state.all.map((item,index)=>{
                                    if(this.state.type === index){
                                        return(
                                            <Text allowFontScaling={false} key={index} style={styles.textTop}>{item}</Text>
                                        )
                                    }
                                })
                            }

                        </View>
                        {
                            this.state.type === 3 ?
                                <View style={styles.tabBox}>
                                    <ScrollView horizontal={true} style={styles.tabList}>
                                        <TouchableWithoutFeedback onPress={() => this.setState({childActive: 0})}>
                                            <View style={[base.rowCC, styles.tabItem, this.state.childActive === 0 ? styles.tabItemActive : {}]}>
                                                <Text allowFontScaling={false} style={[styles.tabItemText, this.state.childActive === 0 ? styles.tabItemTextActive : {}]}>应收类</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback onPress={() => this.setState({childActive: 1})}>
                                            <View style={[base.rowCC, styles.tabItem, this.state.childActive === 1 ? styles.tabItemActive : {}]}>
                                                <Text allowFontScaling={false} style={[styles.tabItemText, this.state.childActive === 1 ? styles.tabItemTextActive : {}]}>商票类</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback onPress={() => this.setState({childActive: 2})}>
                                            <View style={[base.rowCC, styles.tabItem, this.state.childActive === 2 ? styles.tabItemActive : {}]}>
                                                <Text allowFontScaling={false} style={[styles.tabItemText, this.state.childActive === 2 ? styles.tabItemTextActive : {}]}>预付类</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                        <TouchableWithoutFeedback onPress={() => this.setState({childActive: 3})}>
                                            <View style={[base.rowCC, styles.tabItem, this.state.childActive === 3 ? styles.tabItemActive : {}]}>
                                                <Text allowFontScaling={false} style={[styles.tabItemText, this.state.childActive === 3 ? styles.tabItemTextActive : {}]}>存货类</Text>
                                            </View>
                                        </TouchableWithoutFeedback>
                                    </ScrollView>
                                    {
                                        this.state.gyl.map((item,index)=>{
                                            if(index === this.state.childActive){
                                                return(
                                                    <View key={index} style={styles.tabInnerBox}>
                                                        <View style={styles.tabContentBox}>
                                                            <View style={styles.tabContentTitleBox}>
                                                                <Text allowFontScaling={false} style={styles.tabContentTitle}>{item.t1}</Text>
                                                            </View>
                                                            <View style={styles.tabContentValueBox}>
                                                                <Text allowFontScaling={false} style={styles.tabContentValue}>{item.v1}</Text>
                                                            </View>
                                                        </View>
                                                        <View style={styles.tabContentBox}>
                                                            <View style={styles.tabContentTitleBox}>
                                                                <Text allowFontScaling={false} style={styles.tabContentTitle}>{item.t2}</Text>
                                                            </View>
                                                            <View style={styles.tabContentValueBox}>
                                                                <Text allowFontScaling={false} style={styles.tabContentValue}>{item.v2}</Text>
                                                            </View>
                                                        </View>
                                                    </View>
                                                )
                                            }
                                        })
                                    }
                                </View>: <View/>
                        }
                    </View>
                </ScrollView>
                <TouchableOpacity onPress={() => this.skipToDemand()} activeOpacity={layout.TOUCH_OPACITY_ACTIVE}>
                    <View style={[base.rowCC, styles.bottomBtnBox]}>
                        <Text allowFontScaling={false} style={styles.bottomBtn}>我有资产</Text>
                    </View>
                </TouchableOpacity>
                <View ref="nav_bar" style={[base.rowCC, styles.navContainer, styles.navBarBox]}>
                    <StatusBar barStyle={'light-content'}/>
                    <TouchableWithoutFeedback
                        onPress={() => this.props.navigation.goBack()}>
                        <View style={[base.rowCC, styles.btnBox]}>
                            <Image
                                style={styles.btnIcon}
                                source={require('../../sources/icon_global_back.png')}
                                resizeMode={'contain'}
                            >
                            </Image>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={[base.rowCC, styles.titleBox]}>
                        <Text allowFontScaling={false} ref="nav_bar_title" style={styles.title}>{this.state.name || Constants.APP_NAME}</Text>
                    </View>
                    <View style={[base.rowCC, styles.btnBox]}/>
                </View>
            </View>
        )
    }
}

const navStyle = {
    navContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: layout.MAX_WIDTH,
        height: layout.STATUS_BAR_HEIGHT + layout.NAV_BAR_HEIGHT,
        paddingTop: layout.STATUS_BAR_HEIGHT,
        backgroundColor: 'rgba(0,0,0,0)'
    },
    btnBox: {
        alignSelf: 'stretch',
        width: layout.NAV_BAR_HEIGHT
    },
    btnIcon: {
        width: layout.width(50),
        height: layout.height(50),
    },
    titleBox: {
        flex: 1,
    },
    title: {
        color: layout.MAIN_COLOR,
        fontSize: layout.font(34)
    },
    point: {
        position: 'absolute',
        right: 0,
        top: 0,
        width: layout.width(14),
        height: layout.height(14),
        borderRadius: layout.width(7),
        backgroundColor: '#FF3C4B'
    }
};

const styles = StyleSheet.create({
    ...navStyle,
    container: {
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: '#fff'
    },
    topImage: {
        width: layout.MAX_WIDTH,
        height: layout.height(400)
    },
    contentBox: {},
    textTopBox: {
        paddingVertical: layout.height(52),
        paddingHorizontal: layout.width(32),
    },
    textTop: {
        fontSize: layout.font(28),
        lineHeight: layout.heightToFixed(56),
        color: layout.MAIN_AUX_COLOR
    },
    tabBox: {
        alignSelf: 'stretch',
    },
    tabList: {
        width: layout.MAX_WIDTH,
        height: layout.height(68)
    },
    tabItem: {
        width: layout.MAX_WIDTH / 4,
        height: layout.height(68),
        borderBottomWidth: layout.LINE_WIDTH * 2,
        borderBottomColor: layout.MAIN_BORDER_COLOR
    },
    tabItemActive: {
        borderBottomColor: layout.MAIN_COLOR
    },
    tabItemText: {
        fontSize: layout.font(36),
        color: layout.FORM_FONT_COLOR
    },
    tabItemTextActive: {
        color: layout.MAIN_COLOR
    },
    tabInnerBox: {
        paddingVertical: layout.GAP_VERTICAL_MID,
        paddingHorizontal: layout.width(32),
    },
    tabContentBox: {},
    tabContentTitleBox: {
        marginVertical: layout.GAP_VERTICAL_MID,
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
        borderLeftWidth: layout.LINE_WIDTH * 2,
        borderLeftColor: layout.MAIN_COLOR
    },
    tabContentTitle: {
        color: layout.FORM_FONT_COLOR,
        fontSize: layout.font(32)
    },
    tabContentValueBox: {
        padding: layout.GAP_HORIZONTAL_SMALL,
    },
    tabContentValue: {
        fontSize: layout.font(28),
        lineHeight: layout.heightToFixed(44),
        color: layout.MAIN_AUX_COLOR
    },
    bottomBtnBox: {
        alignSelf: 'stretch',
        height: layout.height(90),
        backgroundColor: layout.MAIN_COLOR
    },
    bottomBtn: {
        fontSize: layout.font(32),
        color: '#fff'
    },
})

//路由
const AssetSummary = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'AssetSummary',
    sign: false
};

export default AssetSummary;